<template>
  <div class="index">
    <el-container>
      <el-main>
        <el-input
            class="search-bar"
            placeholder="搜索餐厅..."
            suffix-icon="el-icon-search"
        ></el-input>
        <el-button type="primary" class="search-button">搜索</el-button>
        <el-card class="welcome-card">
          <h2>欢迎使用惊喜一餐！</h2>
          <p>探索高评分餐厅，开启美食之旅！</p>
        </el-card>
        <el-row :gutter="20" class="restaurant-list">
          <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="8">
            <el-card class="restaurant-card">
              <img :src="restaurant.image" class="restaurant-image" alt="餐厅图片" />
              <div class="restaurant-info">
                <h3 class="restaurant-name">{{ restaurant.name }}</h3>
                <p class="restaurant-mask">评分: {{ restaurant.rating }}</p>
                <p class="restaurant-description"> {{ restaurant.description }}</p>
                <p class="restaurant-location">{{ restaurant.location }}</p>
                <el-button class="detail-button" @click="viewDetails(restaurant.id)">查看详情</el-button>
<!--                <el-button class="detail-button" @click="navigateTo('/restaurant', restaurant.id)">查看详情</el-button>-->
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <p>© 2024 惊喜一餐. 保留所有权利.</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendedRestaurants: [
        {
          id: 1,
          name: '椒麻鸡',
          rating: 4.9,
          location: '镜湖区苏宁广场7楼',
          description: '⭐️镜湖区好评榜',
          image: 'src/assets/椒麻鸡.png',
        },
        {
          id: 2,
          name: '塔斯汀',
          rating: 4.8,
          location: '镜湖区万达广场4楼',
          description: '⭐️中国汉堡',
          image: 'src/assets/小塔斯汀.png',
        },
        {
          id: 3,
          name: '胖哥俩',
          rating: 4.9,
          location: '镜湖区苏宁广场5楼',
          description: '⭐️好好吃的鸡翅煲',
          image: 'src/assets/鸡翅煲.png',
        }
      ],
    };
  },
  methods: {
    viewDetails(id) {
      this.$router.push({ name: 'RestaurantDetails', params: { id } });
    },
  },
};
</script>

<style scoped>
.index {
  background-color: #fade7a;
  //background-image: url('src/assets/homebank.JPG');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.welcome-card {
  text-align: center;
  //background-image: url('src/assets/homebank.JPG');
  background: linear-gradient(120deg, #fff2e0, #fff2cc);
  margin-bottom: 20px;
  font-size: 15px;
  color: #a67603;
}


.restaurant-list {
  margin-top: 10px;

}

.restaurant-card {
  text-align: center;
  background: linear-gradient(120deg, #fff5e0, #fff5cc);
  margin: 10px;
}
.restaurant-image {
  width: 100%; /* 使图片宽度适应容器 */
  height: 200px; /* 设置固定的高度 */
  object-fit: cover; /* 保持宽高比，可能会裁剪图片 */
}

.restaurant-name {
  font-size: 15px;
  font-weight: bold;
}

.restaurant-mask {
  font-size: 13px;
  background: -webkit-linear-gradient(#FFD700, #9b7601);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.restaurant-location {
  font-size: 12px;
  color: #666;
}

.restaurant-info {
  padding: 10px;
}

.search-bar {
  width: 50%;
  background-color: #f8ef7e;
  margin-top: 10px;
  margin-bottom: 10px;
}
.detail-button{
  background-color: #f8ef7e;
}
.search-button {
  background-color: #f8ef7e;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
body {
  background-color: #a8d8b4; /* 浅绿色 */
}
</style>